﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DetailWiget.ascx.cs" Inherits="Layout_website.UserControl.DetailProductWiget.DetailWiget" %>
<%@ Register Src="~/UserControl/BlogWiget/CommentWiget.ascx" TagPrefix="uc1" TagName="CommentWiget" %>
<%@ Register Src="~/UserControl/BlogWiget/SocialComentWiget.ascx" TagPrefix="uc1" TagName="SocialComentWiget" %>




<div class="product-info-box">
    <div class="product-essential">
        <div class="product-img-box">
            <p class="product-image-zoom">
                <img src="../Content/images/view_img.png" alt="Image" title="Image">
            </p>
            <p>
                Click on above image to view full picture
            </p>
            <div class="img-slider">
                <a href="#" title="Prev" class="prev slider-btn">
                    <img src="../Content/images/prev_img_btn.png" title="Prev" alt="Prev"></a>
                <a href="#" title="Next" class="next slider-btn">
                    <img src="../Content/images/next_img_btn.png" title="Next" alt="Next"></a>
                <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
                    <div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
                        <ul id="moreView" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 706px;">
                            <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none;"><a class="ajax cboxElement" href="../Content/images/view_img.png">
                                <img src="../Content/images/small_img.png" alt="" title=""></a></li>
                            <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" jcarouselindex="2" style="float: left; list-style: none;"><a class="ajax cboxElement" href="../Content/images/view_img.png">
                                <img src="../Content/images/small_img.png" alt="" title=""></a></li>
                            <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" jcarouselindex="3" style="float: left; list-style: none;"><a class="ajax cboxElement" href="../Content/images/view_img.png">
                                <img src="../Content/images/small_img.png" alt="" title=""></a></li>
                            <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" jcarouselindex="4" style="float: left; list-style: none;"><a class="ajax cboxElement" href="../Content/images/view_img.png">
                                <img src="../Content/images/small_img.png" alt="" title=""></a></li>
                            <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal" jcarouselindex="5" style="float: left; list-style: none;"><a class="ajax cboxElement" href="../Content/images/view_img.png">
                                <img src="../Content/images/small_img.png" alt="" title=""></a></li>
                            <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal" jcarouselindex="6" style="float: left; list-style: none;"><a class="ajax cboxElement" href="../Content/images/view_img.png">
                                <img src="../Content/images/small_img.png" alt="" title=""></a></li>
                        </ul>
                    </div>
                    <div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" disabled="disabled" style="display: block;"></div>
                    <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
                </div>
            </div>
        </div>
        <div class="product-shop">
            <h3 class="product-name">Htc Mobile 1120</h3>
            <div class="price-box">
                <span class="price">$600.00</span>
                <span class="availability">In stock</span>
            </div>
            <div class="model-block">
                <p>
                    <span>SKU: </span>20
                </p>
                <p>
                    <span>BRANDS: </span>HTC
                </p>
            </div>
            <div class="first-review">
                Be the first to review this product
            </div>
            <div class="color-size-block">
                <div class="label-row">
                    <label><em>*</em> color</label>
                    <span class="required">* Required Fields</span>
                </div>
                <div class="select-row">
                    <select>
                        <option>-- Please Select --</option>
                    </select>
                </div>
                <div class="label-row">
                    <label><em>*</em> size</label>
                </div>
                <div class="select-row">
                    <select>
                        <option>-- Please Select --</option>
                    </select>
                </div>
            </div>
            <div class="add-to-cart-box">
                <span class="qty-box">
                    <label for="qty">Qty:</label>
                    <a href="javascript:void(0)" title="" class="prev add">
                        <img src="../Content/images/qty_prev.png" title="" alt="add">‹</a>
                    <input type="text" value="1" maxlength="12" id="qty" class="input-text qty" name="qty">
                    <a href="javascript:void(0)" title="" class="next dec add">
                        <img src="../Content/images/qty_next.png" title="" alt="">›</a>
                </span>
                <script type="text/javascript">
                    jQuery(document).ready(function () {
                        jQuery(".ajax").colorbox();
                    });
                    jQuery(function () {
                        jQuery(".add").click(function () {
                            var jQueryadd = jQuery(this);
                            var oldValue = jQueryadd.parent().find("input").val();
                            var newVal = 0;

                            if (jQueryadd.text() == "›") {
                                newVal = parseFloat(oldValue) + 1;
                                // AJAX save would go here
                            } else {
                                // Don't allow decrementing below zero
                                if (oldValue >= 1) {
                                    newVal = parseFloat(oldValue) - 1;
                                    // AJAX save would go here
                                }
                                if (oldValue == 0) {
                                    newVal = parseFloat(oldValue);
                                }
                            }
                            jQueryadd.parent().find("input").val(newVal);
                        });


                    });
                </script>
                <button class="form-button" title="Add to Cart"><span>Add to Cart</span></button>
                <ul class="add-to-box">
                    <li><a href="#" title="Add to Wishlist" class="add-wishlist">Add to Wishlist</a></li>
                    <li><a href="#" title="Add to Compare" class="add-compare">Add to Compare</a></li>
                    <li><a href="#" title="Email to a Friend" class="email-friend">Email to a Friend</a></li>
                    <li class="last"><a href="../Content/images/size_chart.gif" title="Size Guide" class="size-guide ajax cboxElement">Size Guide</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
           
            <aside class="right" style="display:none">
				<ul class="right-img">
					<li><a href="#" title="Image"><img src="../Content/images/view_right_img01.png" title="Image" alt="Image"></a></li>
					<li><a href="#" title="Image"><img src="../Content/images/view_right_img02.png" title="Image" alt="Image"></a></li>
					<li><a href="#" title="Image"><img src="../Content/images/view_right_img03.png" title="Image" alt="Image"></a></li>
				</ul>
			</aside>








<section class="product-collateral">
    <script type="text/javascript">
        $(function () {
            var tabContainers = $('section.product-collateral > div.commonContent');
            tabContainers.hide().filter(':first').show();
            $('section.product-collateral ul.tab-block a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('section.product-collateral ul.tab-block a').removeClass('active');
                $(this).addClass('active');
                return false;
            }).filter(':first').click();
        });
    </script>
    <ul class="tab-block">
        <li><a href="#pro-desciption" title="Description" class="active">Giới thiệu</a></li>
        <li><a href="#pro-tech" title="Comment">Cấu hình</a></li>
         <li><a href="#pro-comment" title="Comment">Đánh giá</a></li>
       

    </ul>
    <div id="pro-desciption" class="pro-detail commonContent" style="display: block;">
        <ol>
            <li>Praesent interdum gravida turpis, eu aliquet</li>
            <li>Praesent interdum gravida turpis, eu aliquet</li>
            <li>Praesent interdum gravida turpis, eu aliquet</li>
            <li>Praesent interdum gravida turpis, eu aliquet</li>
            <li>Praesent interdum gravida turpis, eu aliquet</li>
        </ol>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
        </p>
    </div>
    <div id="pro_tech" class="pro-detail commonContent" style="display: none;">
        <p>
        </p>
    </div>
    <div id="pro-comment" class="pro-detail commonContent" style="display: none;">
        <%-- comment wiget --%>
        <uc1:CommentWiget runat="server" ID="CommentWiget" />
        <uc1:SocialComentWiget runat="server" ID="SocialComentWiget" />
    </div>
   




</section>

		
	